import { messages } from "share/common";
import React, { Component } from "react";
import { Modal, Button, message, Spin } from "antd";
import { openModal, removeContainer } from "components/method/openModal";
import httpFetch from "share/httpFetch";
import "styles/components/mul-modal.scss";
import ApproveHistory from "components/template/approve-history";

class AccrualHistory extends Component {
  state = {
    history: [],
    loading: false,
  };

  componentDidMount() {
    const { accruedExpenseBatchId } = this.props;
    this.setState({ loading: true });
    httpFetch
      .get(`/api/accrued/expense/batch/history/query`, { accruedExpenseBatchId })
      .then((res) => {
        this.setState({ history: res.data });
      })
      .catch((e) => {
        message.error(e.response.data.message);
      })
      .finally(() => {
        this.setState({ loading: false });
      });
  }

  render() {
    const { visible, onCancel, afterClose } = this.props;
    const { loading, history } = this.state;
    return (
      <Modal
        title={messages("finance-10.key22") /*预提历史*/}
        visible={visible}
        onCancel={onCancel}
        afterClose={afterClose}
        width={760}
        footer={[<Button onClick={onCancel}>{messages("common.cancel") /*取消*/}</Button>]}
        className={`mul-modal`}
      >
        <div className={"mul-modal-flex"}>
          <div className={"mul-modal-content"}>
            {loading ? <Spin /> : <ApproveHistory style={{ width: "100%", margin: "5px" }} approvalHistory={history} />}
          </div>
        </div>
      </Modal>
    );
  }
}

AccrualHistory.open = function (env, props) {
  let container;
  const targetProps = {
    ...props,
    visible: true,
    onCancel: () => close(),
    afterClose: () => {
      removeContainer(container);
      container = null;
    },
  };
  function close() {
    let closeModal = () =>
      openModal(
        AccrualHistory,
        {
          ...targetProps,
          visible: false,
        },
        env,
        container
      );
    closeModal();
  }
  container = openModal(AccrualHistory, targetProps, env);
};

export default AccrualHistory;
